import { Component } from 'react';
import { View, Text, PickerView, PickerViewColumn, } from '@tarojs/components';
import { getPickerViewList, getDate, getArrWithTime, formatDate, getDayList } from './utils';
import './index.scss';

type IProps = {
  title: string;
  onOk: ({ current }) => void;
  placeholder?: string;
  initValue?: string;
  startTimeValue?: number;
  endTimeValue?: number;
  onCancel?: ({ current }) => void;
  onClear?: ({ current }) => void;
}

type IState = {
  yearList: any; //数组长度不固定
  monthLsit: any; //数组长度不固定
  dayList: any; //数组长度不固定
  hourList: any; //数组长度不固定
  minuteList: any; //数组长度不固定
  selectIndexList: [number, number, number, number, number];
  fmtInitValue: string;
  current: string;
  visible: boolean;
  hasChange: boolean;
  year: string;
  month: string;
  day: string;
  hour: string;
  minute: string;
}

export default class DateTimePicker extends Component<IProps, IState> {
  constructor(props: IProps) {
    super(props)
    this.state = {
      yearList: [],   //年 -下拉
      monthLsit: [], //月 -下拉
      dayList: [], //日 -下拉
      hourList: [], //时 -下拉
      minuteList: [], //分 -下拉
      selectIndexList: [1, 1, 1, 1, 1], //PickerViewColumn选择的索引
      fmtInitValue: "", //初始值
      current: '', //当前选择的数据
      visible: false, //是否可见
      hasChange: false, //是否更改
      year: '',  //时间值
      month: '',
      day: '',
      hour: '',
      minute: '',
    };
  }

  componentDidMount() {
    const { initValue } = this.props;
    const fmtInitValue = getDate(initValue);
    this.setState({ fmtInitValue });
  }

  static externalClasses = ['wrap-class', 'select-item-class'];

  // 打开时间选择的模态框 - 根据当前时间初始化picker-view的数据
  openModal = () => {
    const { current, fmtInitValue, selectIndexList } = this.state;
    //const selectIndexList = [];
    const arr = getArrWithTime(current || fmtInitValue || getDate()); //优先当前选择的值，其次默认值，其次当前值
    const { yearList, monthLsit, dayList, hourList, minuteList } = getPickerViewList();
    const [year, month, day, hour, minute] = arr;

    //根据arr  数据索引
    selectIndexList[0] = yearList.indexOf(arr[0] + '年');
    selectIndexList[1] = monthLsit.indexOf(arr[1] + '月');
    selectIndexList[2] = dayList.indexOf(arr[2] + '日');
    selectIndexList[3] = hourList.indexOf(arr[3] + '点');
    selectIndexList[4] = minuteList.indexOf(arr[4] + '分');

    this.setState({
      // selectIndexList,
      selectIndexList: [...selectIndexList],
      visible: true,
      yearList,
      monthLsit,
      dayList,
      hourList,
      minuteList,
      year,
      month,
      day,
      hour,
      minute
    })
  }

  // 取消
  cancelHandel = () => {
    this.setState({
      visible: false,
      hasChange: false,
    });

    const { year, month, day, hour, minute } = this.state;
    const current = formatDate(year, month, day, hour, minute);
    this.props.onCancel && this.props.onCancel({ current });
  }

  // 确定
  okHandel = () => {
    const { year, month, day, hour, minute } = this.state;
    const current = formatDate(year, month, day, hour, minute);
    this.setState({
      current,
      hasChange: false,
      visible: false,
    });

    this.props.onOk && this.props.onOk({ current });
  }

  // 切换
  changeHandle = (e: any) => {
    const selectIndexList = e.detail.value;
    const [yearIndex, monthIndex, dayIndex, hourIndex, minuteIndex] = selectIndexList;
    const { yearList, monthLsit, dayList, hourList, minuteList } = this.state;

    const yearStr = yearList[yearIndex];
    const monthStr = monthLsit[monthIndex];
    const dayStr = dayList[dayIndex];
    const hourStr = hourList[hourIndex];
    const minuteStr = minuteList[minuteIndex];

    const year = Number(yearStr.substr(0, yearStr.length - 1));
    const month = Number(monthStr.substr(0, monthStr.length - 1));
    const day = Number(dayStr.substr(0, dayStr.length - 1));
    const hour = Number(hourStr.substr(0, hourStr.length - 1));
    const minute = Number(minuteStr.substr(0, minuteStr.length - 1));

    // 更新年、天数
    const newDayList = getDayList(year, month);

    this.setState({
      selectIndexList,
      dayList: newDayList,
      year: year.toString(),
      month: month.toString(),
      day: day.toString(),
      hour: hour.toString(),
      minute: minute.toString(),
      hasChange: true,
    })
  }

  // 清除数据
  clear = () => {
    this.setState({
      current: ''
    });
    this.props.onClear && this.props.onClear({ current: '' });
  }

  render() {
    const { visible, current, yearList, monthLsit, dayList, hourList, minuteList, selectIndexList, hasChange } = this.state;
    const { placeholder } = this.props;
    return (
      <View className='datetime-picker-wrap wrap-class'>
        <View className='selector-wrap'>
          <View className='select-left'>{this.props.title}</View>
          <View className='select-item select-item-class' onClick={this.openModal}>
            {placeholder || current}
          </View>
          {/* {
                        current && <View className='clear-icon'>
                            <AtIcon value='close-circle' size='20' onClick={this.clear} />
                        </View> 
                    } */}
        </View>
        {visible
          && <View className='wrapper'>
            {/*日期模态框 */}
            <View className='model-box-bg'></View>
            <View className='model-box'>
              <View className='model-picker'>
                <View className='button-model'>
                  <Text className='btn-txt' onClick={this.cancelHandel}>取消</Text>
                  <Text className='btn-txt' onClick={this.okHandel}>确定</Text>
                </View>
                <View className='cont_model'>
                  <PickerView className='pick-view' indicatorStyle='height: 50px;' value={selectIndexList} onChange={this.changeHandle}>
                    {/*年*/}
                    <PickerViewColumn className='picker-view-column'>
                      {
                        yearList.length && yearList.map((item, index) =>
                          <View key={String(index)} className='pick-view-column-item'>{item}</View>)
                      }
                    </PickerViewColumn>
                    {/*月*/}
                    <PickerViewColumn className='picker-view-column'>
                      {
                        monthLsit.length && monthLsit.map((item, index) =>
                          <View key={String(index)} className='pick-view-column-item'>{item}</View>)
                      }
                    </PickerViewColumn>
                    {/*日*/}
                    <PickerViewColumn className='picker-view-column'>
                      {
                        dayList.length && dayList.map((item, index) =>
                          <View key={String(index)} className='pick-view-column-item'>{item}</View>)
                      }
                    </PickerViewColumn>
                    {/*时*/}
                    <PickerViewColumn className='picker-view-column'>
                      {
                        hourList.length && hourList.map((item, index) =>
                          <View key={String(index)} className='pick-view-column-item'>{item}</View>)
                      }
                    </PickerViewColumn>
                    {/*分*/}
                    <PickerViewColumn className='picker-view-column'>
                      {
                        minuteList.length && minuteList.map((item, index) =>
                          <View key={String(index)} className='pick-view-column-item'>{item}</View>)
                      }
                    </PickerViewColumn>
                  </PickerView>
                </View>
              </View>
            </View>
          </View>}
      </View>
    );
  }
}